<template>
	<scroll-view class="home" scroll-y @scroll="home_scroll">
		<!-- 头部的更多，搜索框，消息 -->
		<view class="header">
			<view class="icon cuIcon-sort" @click="jumpCategory"></view>
			<view class="input" @click="jumpSearch">
				<view class="icon cuIcon-search"></view>
				<input type="text" placeholder="搜索" />
			</view>
			<view class="icon cuIcon-message"></view>
		</view>
		<!-- 导航 -->
		<view class="grid_nav" v-if="nav">
			<view class="item" v-for="item in nav" @click="navImg(item.title)">
				<!-- 图片 -->
				<view class="img">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<!-- 标题 -->
				<view class="title" :style="`color:${item.titleColor}`">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 视频列表 -->
		<view class="video_list">
			<WaterfallsFlow :wfList='video_list' @itemTap="itemTap" />
			<!-- 视频列表的loading -->
			<view class="cu-load loading" v-if="video_list_loading && nav"></view>
		</view>

	</scroll-view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		watch,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		req_home_nav,
		req_home_video_list
	} from './home_api.js'
	import {
		useVideData
	} from '../../store/videoDetail.js';
	// 导航
	const nav = ref(null)
	// 视频列表
	const video_list = ref([])
	// 视频列表页码
	const video_list_page = ref(1)
	// 视频列表是否有下一页
	const video_list_next = ref(true)
	// 视频列表加载
	const video_list_loading = ref(false)
	// 页面根节点高度
	const homeHeight = ref(0)
	// 回放视频仓库
	const videoStore = useVideData()

	onMounted(() => {
		getNavs()
		getVideos()
		getHomeHeight()
	})

	// 获取根节点高度
	const getHomeHeight = () => {
		const query = uni.createSelectorQuery()
		query.in(getCurrentInstance())
		query.select('.home').boundingClientRect(data => {
				homeHeight.value = data.height
			})
			.exec()
	}

	// home滚动
	const home_scroll = (e) => {
		if (!homeHeight.value) return
		if (video_list.value.length == 0) return;
		if (!video_list_next.value) return;
		if (video_list_loading.value) return;
		const height = homeHeight.value
		const scrollHeight = e.detail.scrollHeight - height
		const scrollTop = e.detail.scrollTop

		if (scrollHeight - 300 <= scrollTop) {
			console.log('触发');
			video_list_page.value += 1
			getVideos()
		}
	}
	// 点击视频
	const itemTap = (item) => {
		console.log(item);
		videoStore.item = item
		const itemId = item.itemIdUrl
		const actorId = item.actorIdUrl
		const explainId = item.explainId
		uni.navigateTo({
			url: `/pages/videoPlay/videoPlay?itemId=${itemId}&actorId=${actorId}&explainId=${explainId}`
		})
	}
	// 请求导航数据
	const getNavs = async () => {
		uni.showLoading({
			title: '加载中'
		})
		await req_home_nav()
			.then(res => {
				nav.value = res
				console.log("导航", res);
			})
		uni.hideLoading()
	}
	// 请求视频列表数据
	const getVideos = async () => {
		video_list_loading.value = true
		await req_home_video_list({
				page: video_list_page.value
			})
			.then(res => {
				if (!res.data) throw new Error('请求视频列表的数据为空')
				video_list_next.value = Boolean(res.data.mbook)
				video_list.value = [...video_list.value, ...res.data.list]
				// Array.prototype.push.apply(video_list.value, res.data.list)
				console.log("视频列表", video_list.value, video_list_next.value);

			})
		video_list_loading.value = false
	}

	const jumpCategory = () => {
		uni.navigateTo({
			url: '/pages/category/category'
		})
	}
	const jumpSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	const navImg = (title) => {
		uni.navigateTo({
			url: `/pages/searchResult/searchResult?q=${title}&isSearch=true`
		})
	}
</script>

<style scoped lang="scss">
	.home {
		height: 100vh;
	}

	image {
		vertical-align: middle;
	}

	// 头部
	.header {
		display: flex;
		font-size: 1.5rem;
		align-items: center;
		border: 1upx solid rgba(60, 60, 60, .2);
		color: gray;
		background-color: #fff;

		.icon {
			flex-shrink: 0;
			padding: 20upx;
		}

		.input {
			display: flex;
			flex-grow: 1;
			align-items: center;
			position: relative;
			background-color: rgb(222, 222, 222);
			font-size: 1rem;

			input {
				flex-grow: 1;
			}

			.icon {
				flex-shrink: 0;
			}
		}
	}

	// 导航
	.grid_nav {
		display: grid;
		grid-template-columns: repeat(5, 20%);
		background-color: #fff;

		.item {
			position: relative;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 0.8rem;
			text-wrap: nowrap;
			text-align: center;

			.img {
				width: 100%;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					aspect-ratio: 1/1;
				}
			}
		}
	}

	// 视频列表
	.video_list {
		padding: 0upx 30upx 100upx 30upx;
		box-sizing: border-box;

		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>